// Base
.content
  font-size 16px

@css {
  .post-content>*:first-child {
      margin-top: 0;
  }
}

// Links
.content
  a, .fake-link
    text-decoration none
    transition color .15s ease-in
    color $main-color
    &:hover
      opacity .5
      transition all .15s ease-in

// Typography
.content
  h1, h2, h3, h4, h5 , h6
    margin-top: 24px 0 16px 0
    font-weight: 600
    line-height: 1.25

  h1
    padding-bottom: 0.3em
    font-size: 2em
    border-bottom: 1px solid #eee
  
  h2
    padding-bottom: 0.3em
    font-size: 1.5em
    border-bottom: 1px solid #eee
  
  h3
    font-size: 1.25em
  
  h4
    font-size: 1em
  
  h5
    font-size: 0.875em
  
  h6
    font-size: 0.85em
    color: #777

// Elements
.content
  hr
    border: 0
    height: 1px
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

  blockquote
    background #f9f9f9
    border-left: 10px solid #ccc
    margin: 2em 10px
    padding: 1em 15px
    p
      display: inline
    footer
      text-align right
      padding 20px 10px 10px 10px
      font-family $fontTitle
      overflow auto
      strong
        &:before
          content "-"
          padding-right 10px
      cite
        padding 10px

  .pullquote
    float: right;
    border: none;
    padding: 0;
    margin: 1em 0 1em 1.5em;
    text-align: left;
    width: 45%;
    background none
    font-size 2em
    font-style italic
    &.left
      float left
      margin: 1em 1.5em 1em 0

  dl
    dt
      font-weight: bold

  ul
    li
      list-style-type: square

  table
    width: 100%
    border-collapse: collapse
    th
      font-weight: normal
      text-align: left
      background-color: #F7F7F7
      padding: 0.4em
    td
      padding: 0.4em
    tr
      &:not(:last-child)
        td
          border-bottom: 1px solid #EEE

  b
    font-weight: 600

// Media
.post-content
  img
    display block

  .video-container
    position relative
    padding-top 56.25%
    height 0
    overflow hidden
    iframe, object, embed
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      margin-top 0

// tags
.tags-container-vertical
  display none
  @media screen and (min-width: 1400px)
    display block
    position relative
    height 0
    margin-left -10vw 
    .tags-sub-container
      position absolute
      text-align right
      transform-origin left
      transform rotate(-90deg) translateX(-100%)

.tags-container-bottom
  display block
  @media screen and (min-width: 1400px)
    display none